<script>
import { getAdminList,addAdminFn, updateAdminFn, delAdminFn } from '@/api/user'
import { routes} from '@/router'
import {
Plus
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
export default {
    data() {
        return {
            adminList: [],
            current: 1, // 当前页码
            dialogVisible: false, // 是否显示添加的对话框
            formData: { // 收集管理员信息
                adminname: '',
                password: '',
                role: '',
                checkedKeys: []
            },
            menus: routes[0].children, // 路由列表 
            drawer: false, // 是否展开抽屉组件
            defaultCheckedKeys: [], // 编辑管理员默认被选中的节点数组
        }
    },
    mounted() {
        this.getAdminFn()
    },
    computed: {
        tableData() {
            return this.adminList.slice((this.current - 1) * 10,(this.current - 1) * 10 + 10)
        }
    },
    components: {
        Plus
    },
    methods: {
        getAdminFn() {
            getAdminList().then(res => {
                // console.log(res);
                this.adminList = res.data
            })
        },
        // 该函数是用来获取树形结构组件中选择的内容
        // ----------------- 获取被选中的节点 ---------------------
        formatCheckedKeys(val) {
            // console.log(this.$refs.treeRef.getCheckedNodes(true));

            // 获取到所有被选中的子节点
            const list = val == '10086' ? this.$refs.treeRef2.getCheckedNodes(true) : this.$refs.treeRef.getCheckedNodes(true)
            // console.log('1111111',list);

            // 该数组是用来放父级路由 label 用的数组
            // 用来判断是否已经添加过父节点
            const tempList = []

            // 放最终组合成的结果
            const result = []

            // 先遍历所有被选中的子节点(三级路由)
            // item 被选中的其中一个(三级路由)
            list.forEach(item => {

                
                // this.menus.find 遍历二级路由
                // mitem 二级路由
               const parent =  this.menus.find(mitem => {
                   
                   // 如果遍历的 child 的 label 和 item(被选中的) 的 label 相等
                    //  那就代表找到父级节点了
                    return mitem.children.some(child => child.label == item.label)
               })


                // 先判断 parent.label 父级节点的 label 有没有在 tempList 里面
                if (tempList.includes(parent.label)) {
                    // 父级路由已经存在

                    // result.find(item => item.label == parent.label) 查询到当前的 父级路由
                    // .children.push(item) 在当前父级路由的 children 中添加一个选中的子路由
                    result.find(item => item.label == parent.label).children.push(item)
                } else {
                    // 父级路由不存在
                    tempList.push(parent.label)

                    // 在结果中添加一个父级路由，并将其被选中的子级路由添加在 children
                    result.push({
                        label: parent.label,
                        path: parent.path,
                        icon: parent.icon,
                        children: [item]
                    })
                }
               
            })

            this.formData.checkedKeys = result
            // console.log('2222222',result);

        },
        // // ----------------- 编辑按钮的点击事件 --------------------- 添加管理员的点击事件
        addAdminClick() {

            if (this.formData.adminname.length < 1 || this.formData.password.length < 1) {
                ElMessage.error('账号和密码不能为空')
                return
            }

            

            // 调用获取到选中的内容
            this.formatCheckedKeys()

            // this.formData.checkedKeys = this.$refs.treeRef.getCheckedKeys(true)
            // console.log(this.formData);

            // 发送数据请求进行管理员的添加
            addAdminFn(this.formData).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    ElMessage.success('恭喜添加管理员成功')
                    this.dialogVisible = false
                    // 重新加载页面数据
                    this.getAdminFn()

                } else {
                    ElMessage.error('温馨提示: ' + res.message)
                    return
                }
            })
        },


        // ----------------- 编辑按钮的点击事件 ---------------------
        editClick(row) {
            // 
            // console.log(row);
            this.formData = {
                adminname: row.adminname,
                password: row.password,
                role: row.role,
                checkedKeys: row.checkedKeys
            }


            const list = []
            row.checkedKeys.forEach(parent => {
                if (parent.children) {
                    parent.children.forEach(item => {
                        list.push(item.path)
                    })
                }
            })
            this.defaultCheckedKeys = list


            // 弹出抽屉
            this.drawer = true
        },
        updateAdminClick() {

            // 获取被选中的最新内容
            this.formatCheckedKeys('10086')

            // console.log(this.formData);
            updateAdminFn(this.formData).then(res => {
                if (res.code == 200) {
                    // 关闭抽屉
                    this.drawer = false

                    // 刷新页面数据
                    this.getAdminFn()

                   

                } else {
                    ElMessage.error('温馨提示：' + res.message)
                    return
                }
            })

        },
        closeDrawer() {
            // 关闭抽屉的回调函数
             // 置空内容
                    this.formData = {
                        adminname: '',
                        password: '',
                        role: '',
                        checkedKeys: []
                    }
        },
        delClick(row) {
            // 删除按钮的点击事件
            delAdminFn({
                adminid: row.adminid
            }).then(res => {
                // console.log(res);
                if (res.code == 200) {
                    // 重新加载页面
                    this.getAdminFn()
                } else {
                    ElMessage.error('温馨提示：' + res.message)
                    return
                }
            })
        }
    },

}
</script>
<template>
    <div>
        <h4>
            管理员列表  
            <el-button @click="dialogVisible = true">
                <el-icon><Plus /></el-icon>
                &nbsp;
                添加
            </el-button>
        </h4>
          <el-table :data="tableData" style="width: 100%">
            <el-table-column type="index" label="序号" width="180">
                <template #default="{$index}">
                    <div> {{ (this.current - 1) * 10 + 1 + $index }} </div>
                </template>
            </el-table-column>
            <el-table-column prop="adminname" label="管理员名称"  />
            <el-table-column label="管理员类型">
                <template #default="data">
                    <div>
                        <el-tag v-if="data.row.role == 1" type="primary">普通管理员</el-tag>
                        <el-tag v-else-if="data.row.role == 2" type="success">超级管理员</el-tag>
                        <el-tag v-else type="info">普通用户</el-tag>
                        
                    </div>
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template #default="{ row }">
                    <el-button type="success" @click="editClick(row)">编辑</el-button>
                    <el-popconfirm 
                    @confirm="delClick(row)" 
                    :title="'您确定要删除 ' + row.adminname + ' 吗?'"
                    confirm-button-text="确定"
                    cancel-button-text="取消"
                    >
                        <template #reference>
                        <el-button type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>

                     
                </template>
            </el-table-column>
        </el-table>
        <el-pagination v-model:current-page="current" background layout="prev, pager, next" :total="adminList.length" />


        <!-- 对话框添加管理员 -->
        <el-dialog
            v-model="dialogVisible"
            title="添加管理员"
            width="40%"
        >
        <el-form
    label-width="auto"
  >
            <el-form-item label="管理员账号">
                <el-input v-model="formData.adminname" />
            </el-form-item>

             <el-form-item label="管理员密码">
                <el-input v-model="formData.password" />
            </el-form-item>

             <el-form-item label="管理员类型">
                 <el-select
                    v-model="formData.role"
                    placeholder="请选择管理员类型"
                >
                    <el-option
                        label="普通管理员"
                        :value="1"
                    />
                    <el-option
                        label="超级管理员"
                        :value="2"
                    />
                </el-select>
            </el-form-item>

            </el-form>

            <!-- 树形控件 -->
            <el-tree
                :data="menus"
                show-checkbox
                default-expand-all
                node-key="path"
                ref="treeRef"
            />

            <el-button @click="addAdminClick">添加管理员</el-button>
        </el-dialog>


        <!-- -------------------------------------------------------------- -->

        <!-- 抽屉编辑管理员 -->

        <el-drawer @close="closeDrawer" v-model="drawer" title="编辑管理员">
            <el-form
    label-width="auto"
  >
            <el-form-item label="管理员账号">
                <el-input v-model="formData.adminname" />
            </el-form-item>

             <el-form-item label="管理员密码">
                <el-input type="password" disabled v-model="formData.password" />
            </el-form-item>

             <el-form-item label="管理员类型">
                 <el-select
                    v-model="formData.role"
                    placeholder="请选择管理员类型"
                >
                    <el-option
                        label="普通管理员"
                        :value="1"
                    />
                    <el-option
                        label="超级管理员"
                        :value="2"
                    />
                </el-select>
            </el-form-item>

            </el-form>

            <!-- 树形控件 -->
            <el-tree
                :data="menus"
                show-checkbox
                :default-checked-keys="defaultCheckedKeys"
                default-expand-all
                node-key="path"
                ref="treeRef2"
            />

            <el-button @click="updateAdminClick">修改管理员</el-button>
        </el-drawer>



    </div>
</template>

